{{include './index_header.html' '蛆蛆音乐'}}
<style>
    .mui-spinner{
        width: 100px;
        height: 100px;
        font-size: 50px;
    }
    h3,h4{
        /* justify-self: center; */
        text-align: center;
    }
</style>

    <div class="mui-content">
        <h3>
            <span class="mui-spinner"></span>
            <h4>加载中</h4>
        </h3>
        
    </div>
    

    
    <script>
        var favorite = ['周杰伦','林俊杰','邓紫棋','莫文蔚','蔡健雅','田馥甄','王菲','陈奕迅','林宥嘉','张敬轩','孙燕姿','王心凌','杨丞琳','张韶涵','萧亚轩','梁静茹']
        var singer = favorite[Math.floor(Math.random()*favorite.length)]

$.get('https://wyy-nine.vercel.app/search?keywords='+singer,function(data){
            console.log(data);
            var str = ''
            
            data.result.songs.forEach((item,index)=>{
                var singers = ''
                var src = ''
                // if(index < 10){
                    $.get('https://wyy-nine.vercel.app/album?id='+item.album.id,(albums)=>{
                        
                        src = albums.album.picUrl
                        // console.log(src);
                        item.artists.forEach((x,i)=>{
                            singers += x.name + '&#x3000;'
                        })
                        str += `
                        <div class="mui-card"  data-id="${item.id}">
                            <!--页眉，放置标题-->
                            <div class="mui-card-header"><h4>${item.name}----${singers}</h4></div>
                            <!--内容区-->
                            <div class="mui-card-content"><img src="${src}" alt=""></div>
                            <!--页脚，放置补充信息或支持的操作-->
                            <div class="mui-card-footer">专辑名：${item.album.name}</div>
                        </div>
                        `
                        $('.mui-content').html(str)
                    })
                    
                // }
            })
            
        })
        
        
        // mui-card
        $('.mui-content').on('click','.mui-card',function(e){
            var id = e.currentTarget.dataset.id
            console.log(e.currentTarget.dataset.id);
            location.href = '/play?id='+id
        })
    </script>
</body>

</html>